<template>
	<div id="lessonFeedbackDisplay" class="lessonFeedbackDisplay">
		<x-img :src="imgUrl" :webp-src="`${imgUrl}?type=webp`" @on-success="success" @on-error="error" class="lessonFeedbackHeader" error-class="lessonFeedbackHeader-error" :offset="-100" container="#vux_view_box_body"></x-img>
		<div>
			<video-player  class="video-player-box"
			               ref="videoPlayer"
			               :options="playerOptions"
			               :x5-playsinline="true"
			               :playsinline="true"
			               customEventName="customstatechangedeventname"
			               @play="onPlayerPlay($event)"
			               @pause="onPlayerPause($event)"
			               @statechanged="playerStateChanged($event)"
			               @ready="playerReadied">
			</video-player>
		</div>
		<h3 style="text-align: center;color:white;font-weight: bold;">{{body.name}}宝贝和{{body.teacher}}老师的快乐时光<br>{{body.time}}</h3>

		<group class="studentReportGroup" title="课程目标">
			<cell class="reportCell" primary="content" :value="body.class_object" value-align="left"></cell>
		</group>
		<group class="studentReportGroup" title="教师评语">
			<cell class="reportCell" primary="content" :value="body.teacher_feedback" value-align="left"></cell>
		</group>
		<group class="studentReportGroup" title="课堂表现">
			<cell title="专注">
				<rater disabled v-model="body.class_perf_con"></rater>
			</cell>
			<cell title="反应">
				<rater disabled v-model="body.class_perf_react"></rater>
			</cell>
			<cell title="互动">
				<rater disabled v-model="body.class_perf_interact"></rater>
			</cell>
		</group>

		<group class="studentReportGroup" title="课程内容">
			<cell class="reportCell" primary="content" title="闪卡" :value="body.class_content_card" value-align="left"></cell>
			<cell class="reportCell" primary="content" title="八大课程" :value="body.class_content_core" value-align="left"></cell>
			<cell class="reportCell" primary="content" title="辅助教材" :value="body.class_content_assist_tools" value-align="left"></cell>
			<cell class="reportCell" primary="content" title="益智教具" :value="body.class_content_wise_tools" value-align="left"></cell>
			<cell class="reportCell" primary="content" title="辅助训练" :value="body.class_content_assist_coach" value-align="left"></cell>
		</group>

	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import 'video.js/dist/video-js.css'
	import { videoPlayer } from 'vue-video-player'

	import {wxShare} from '../../../../utils/wxShare'
	import NetWorking from '../../../../utils/networking'
	import {Group, Cell, Rater, XTextarea, XButton, XImg} from 'vux'
	export default {
		name: "lesson-feedback",
		components: {
			Group,
			Cell,
			Rater,
			XTextarea,
			XButton,
			videoPlayer,
			XImg
		},
		data() {
			return {
				isWechat: false,
				isAndroid: false,
				isiOS: false,
				shareWithFriendsParams: {},
				shareWithTimeLineParams: {},
				imgUrl: 'https://edumavin-oss.oss-cn-beijing.aliyuncs.com/new-banner.jpg',
				bImg: {
					backgroundImage: "url(" + require("./assets/img/background.jpg") + ")",
					//backgroundRepeat: "no-repeat",
					backgroundSize: "100%",
					//marginTop: "5px",
				},
				playerOptions: {
					// videojs options
					aspectRatio: '20:9',
					fluid: true,
					muted: false,
					language: 'zh-CN',
					playbackRates: [0.7, 1.0, 1.5, 2.0],
					sources: [{
						type: "video/mp4",
						src: "https://edumavin-oss.oss-cn-beijing.aliyuncs.com/197fe26a2b4c42d13895b05d559f2141.mp4"
					}],
					poster: "https://edumavin-oss.oss-cn-beijing.aliyuncs.com/front_screen.jpg",
				},
				body: {
					time: '',
					name: '',
					age: '',
					teacher: '',
					class_object: '',
					teacher_feedback: '',
					class_perf_con: 3,
					class_perf_react: 3,
					class_perf_interact: 3,
					class_content_card: '',
					class_content_core: '',
					class_content_assist_tools: '',
					class_content_wise_tools: '',
					class_content_assist_coach: '',
					video_url: ''
				},
				url: '',
				id: '',
				video: {
					sources: [{
						src: 'https://edumavin-oss.oss-cn-beijing.aliyuncs.com/197fe26a2b4c42d13895b05d559f2141.mp4',
						type: 'video/mp4'
					}],
					options: {
						autoplay: true,
						volume: 0.6,
						poster: 'https://edumavin-oss.oss-cn-beijing.aliyuncs.com/icon.png?Expires=1528775308&OSSAccessKeyId=TMP.AQGLaBONanno8nI0xerflzSXhMU8vJatzqNxuBiiwpatCCfp4ytWr1YIm7HOAAAwLAIVALtQov4dOIH_nb39lWe-KBZeVdj0AhNCMs6OZ46Gvzc7T104r-5KnHP8&Signature=LU2pHGTmpyz%2FLKBWBelPbsZHhw0%3D'
					}
				}
			}
		},
		computed: {
			player() {
				return this.$refs.videoPlayer.player
			}
		},
		created: function () {
			if(navigator.userAgent.match('Android')){
				this.isAndroid = true
			}

			if(navigator.userAgent.match('iPhone')){
				this.isiOS = true
			}

			if(navigator.userAgent.match('MicroMessenger')){
				this.isWechat = true
			}

			bus.$emit("barController", 2)
			bus.$emit("userDefinedEvent", 1)
			let url = 'teachers/customer_act_feedback/' + this.$route.query.id

			let _this = this
			NetWorking.doGet(
				url,
				null,
				null
			).then(
				response => {
					let rs = response.data
					if(rs.error_code == 0){
						_this.body = rs.customer_act_feedback
						bus.$emit("setTopSimpleWithShareTitle", _this.body.name + '课后反馈')
						_this.initWx();

						if(!_this.isWechat){
							_this.initWechatAppShare();
						}
					}else{
						alert(rs.error_message)
					}
				}
			)
		},
		watch: {
			body: function(){
				if(this.body.video_url){
					this.playerOptions.sources[0].src = this.body.video_url
				}
			}
		},
		methods: {
			success (src, ele) {
				console.log('success load', src)
				//const span = ele.parentNode.querySelector('span')
				//ele.parentNode.removeChild(span)
			},
			error (src, ele, msg) {
				console.log('error load', msg, src)
				//const span = ele.parentNode.querySelector('span')
				//span.innerText = 'load error'
			},
			initWechatAppShare() {
				if (typeof Wechat === "undefined") {
					return
				}else{
					this.shareWithFriendsParams = {
						title: this.body.name + '小朋友课堂风采',
						description: '教师评语: ' + this.body.teacher_feedback,
						thumb: 'http://www.edumavin.com/sharedPic.jpg',
						media_type: Wechat.Type.WEBPAGE,
						media_webpageUrl: window.location.origin + '/public' + window.location.hash + '&tenant_id=' + this.$store.state.user.userModel.sysTenant.id
					}
					bus.$emit("setShareWithFriends", this.shareWithFriendsParams)
				}
			},
			initWx(){
				wxShare({
					title: this.body.name + '小朋友课堂风采', // 分享标题
					desc: '教师评语: ' + this.body.teacher_feedback, // 分享描述
					link: window.location.origin + '/public' + window.location.hash + '&tenant_id=' + this.$store.state.user.userModel.sysTenant.id, // 分享链接
					imgUrl: 'http://www.edumavin.com/sharedPic.jpg', // 分享图标
					//   debug:true
				},function(){//分享成功后的回调函数

				});
			},
			userListToString(list){
				var str = ''
				for(var i=0; i<list.length; i++){
					str += list[i].nickname + ','
				}
				str = str.substr(0, str.length-1)
				return str
			},
			// listen event
			onPlayerPlay(player) {
				// console.log('player play!', player)
			},
			onPlayerPause(player) {
				// console.log('player pause!', player)
			},
			// ...player event

			// or listen state event
			playerStateChanged(playerCurrentState) {
				// console.log('player current update state', playerCurrentState)
			},

			// player is ready
			playerReadied(player) {
				console.log('the player is readied', player)
				// you can use it to do something...
				// player.[methods]
			}
		}
	}
</script>

<style>
	.video-player {
		margin: 10px;
	}

	.vjs-big-play-button {
		margin: auto;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0!important;
	}

	.studentReportGroup > .weui-cells__title {
		color: white;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
	}

	.studentReportGroup > .weui-cells {
		margin: 10px;
		border-radius: 15px;
	}

	.studentReportGroup > .weui-cells > .weui-cell > .vux-cell-bd {
		font-weight: bold;
	}

	.reportCell > .vux-cell-align-left {
		color: black;
		word-break: break-all;
		word-wrap: break-word;
	}

	.reportCell > .vux-cell-bd > p > .vux-label {
		padding-right: 15px;
		font-weight: bold;
	}


	.lessonFeedbackDisplay {
		margin-top: 46px;
		margin-bottom: 100px;
		border-radius: 25px;
		background-color: #018ecf;
		padding-bottom: 10px;
	}

	.lessonFeedbackDisplay > .classObject > .weui-cells__title {
		font-size: 18px !important;
		font-weight: bold;
		color: black;
	}

	.lessonFeedbackDisplay > .feedback > .weui-cells__title {
		font-size: 18px !important;
		font-weight: bold;
		color: black;
	}

	.lessonFeedbackDisplay > .inClass > .weui-cells__title {
		font-size: 18px !important;
		font-weight: bold;
		color: black;
	}

	.lessonFeedbackDisplay > .introduction > .weui-cells__title {
		font-size: 18px !important;
		font-weight: bold;
		color: black;
	}

	.lessonFeedbackDisplay > .classContent > .weui-cells__title {
		font-size: 18px !important;
		font-weight: bold;
		color: black;
	}

	.inClass > .weui-cells > .weui-cell{
		padding: 0px 15px !important;
	}

	.weui-cells__title {
		margin-top: 0em !important;
	}

	.introduction > .weui-cells > .weui-cell{
		padding: 0px 15px !important;
	}

	.lessonFeedbackHeader {
		width: 100%;
		height: auto;
	}
	.lessonFeedbackHeader-error {
		background-color: yellow;
	}
	.lessonFeedbackHeader-error:after {
		content: '加载失败';
		color: red;
	}

</style>